<template>
  <view class="homeContainer">
    <!-- <view class="mainbg">
      <AtSearchBar
        v-model:value="searchVal"
        @action-click="onActionClick"
      />
    </view> -->
    <view class="top">
      <image src="../../assets/banner.png" style="width:100%;height:150px;" />
    </view>
    
    <view class="pl20 pr20 pb20">
      <view class="bgfff box-shadow radius15 mt-30 relative service">
        <view class='at-row'>
            <view class='at-col at-col-3' v-for="item in recycleCate" :key="item.value" @tap="cateClick(item)">
              <view class="text-center pt20 pb20">
                <view :class="'iconfont icon-large '+item.icon"></view>
                <!-- <AtIcon value='clock' size='15' color='#4fcc8d'></AtIcon> -->
                <view class="text-small pt10 font-weight c999">{{item.value}}</view>
              </view>
            </view>
          </view> 
      </view>
      <view class="bgfff box-shadow radius15 pxy30 mt20 mb20">
        <view>
          <AtSteps
            :items="stepList"
            :current="currentStep"
          />
        </view>
        <view class="mt20 mb20">
          <AtIcon prefixClass='iconfont' value='icon-step' size='130' color='#F00'></AtIcon>
          <!-- <view class='iconfont icon-step c666'></view> -->
          <AtButton type='primary' circle @click="switchTab">
            在线下单
          </AtButton>
        </view>
        <view class='at-row'>
          <view class='at-col at-col-3' v-for="item in orderGrid" :key="item.value">
            <view class="at-row at-row__justify--center at-row__align--center">
              <AtIcon value='clock' size='15' color='#4fcc8d'></AtIcon>
              <text class="text-small pl5 c999">{{item.value}}</text>
            </view>
          </view>
        </view> 
      </view>
      
      <view class="bgfff pt20 pb20 pl30 pr30 radius15">
        <view class="at-row">
          <view class="at-col-9">
            <view class="text-small c666">苏州资源公司名称..</view>
            <view class="text-medium font-weight c555">正在准备上门...</view>
            <view class="pt5 text-small cbbb">您刚刚下的订已经在受理</view>
          </view>
          <view class="at-col-3 at-row at-row__justify--center at-row__align--center">
            <text class="iconfont icon-large icon-shangmenhuishou maincolor"></text>
          </view>
        </view>
      </view>

      <view class="radius15 overflow mt20">
        <swiper
          style="height:80px;"
          current="current"
          :duration="duration"
          :interval="interval"
          :circular="isCircular"
          :autoplay="isAutoplay">
          <swiper-item v-for="(item, idx) in imgUrls" :key="idx">
            <image :src="item" class="slide-image" style="width:100%;height:100%;" />
          </swiper-item>
        </swiper>
      </view>

      <view class="bgfff radius15 mt20">
        <AtGrid :columnNum="4" :data="serviceGird" :onClick="handlerClick" />
      </view>
      
      <view class="mt20 pb20 at-row at-row__align--center">
        <text class="iconfont icon-large icon-fjsj maincolor"></text>
        <text class="text-medium font-weight pl10 c333">附近商户</text>
        <text class="text-small pl10 cbbb"> | 由平台智能推荐 极速上门</text>
      </view>

      <view>
        <AtList :hasBorder="false">
          <AtListItem
          v-for="(item,index) in sjList"
          :key="index"
          :title='item.company'
          :thumb='item.img'
          :note='item.desc'
          />
        </AtList>
      </view>
    </view>
  
    <!-- <at-skeleton
      style="margin: 10px"
      type="list-item-avatar, divider, list-item-three-line"
    /> -->
    <myFooter />
  </view>
</template>

<script setup>
import { ref,reactive, onMounted, computed } from 'vue'
import Taro, { setStorageSync,showToast } from "@tarojs/taro"
import myFooter from "../tabBar/index.vue"
import request from "../../utils/request"
import './index.scss'

let searchVal = ref('')
let current = 1;
let duration = 500;
let interval = 5000;
let isCircular = false;
let isAutoplay = false;
let  imgUrls = [
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic25.nipic.com%2F20121206%2F11041952_110028251391_2.jpg&refer=http%3A%2F%2Fpic25.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624682716&t=c580764b6584b380f4b0406decd5869b',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3118183385,1926458495&fm=26&gp=0.jpg',
]

let currentStep = ref(0);

const orderGrid = [
    {
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
      value: '价格高'
    },
    {
      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
      value: '速度快'
    },
    {
      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
      value: '服务好'
    },
    {
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
      value: '有保障'
    }
]

const recycleCate = [
    {
      icon: 'icon-cateyiwu',
      type: 1,
      value: '旧衣物'
    },
    {
      icon: 'icon-catefeizhi',
      type: 2,
      value: '废纸箱'
    },
    {
      icon: 'icon-catesuliao',
      type: 3,
      value: '塑料瓶'
    },
    {
      icon: 'icon-catejinshu',
      type: 4,
      value: '废金属'
    }
]

const stepList = reactive(
  [
    {
      title: '在线下单',
      status: ''
    },
    {
      title: '免费上门',
      status: ''
    },
    {
      title: '订单完成',
      status:''
    },
    {
      title: '领取奖励',
      status: ''
    }
  ]
)

const token = computed(()=>{
  return Taro.getStorageSync("userInfo").token
})


const redirect = (url)=>{
  Taro.navigateTo({
    url
  })
}

const handlerClick = (item,index)=>{
  if (index == 0) {
    redirect("/pages/company/recive-order/recive-order")
  } else if (index == 1) {
    redirect('/pages/register-recycler/register-recycler')
  } else if(index == 2){
    switchTab()
  }else{
    redirect('/pages/merchant-enter/merchant-enter')
  }
}
  
const switchTab = ()=>{
    Taro.reLaunch({
      url: '/pages/recycle/recycle'
    })
    setStorageSync('current', 1)
}

const cateClick = (item)=>{
  console.log(item.type);
    Taro.reLaunch({
      url: '/pages/recycle/recycle?cate='+item.type
    })
    setStorageSync('current', 1)
}

const getInprogressOrder = async ()=>{
    let res = await request('/order/getInprogressOrder')
    console.log(res);
}


const serviceGird = [
    {
      image: 'https://img1.baidu.com/it/u=1883459662,2229556455&fm=26&fmt=auto&gp=0.jpg',
      value: '附近订单'
    },
    {
      image: 'https://img1.baidu.com/it/u=2795290672,3748526944&fm=26&fmt=auto&gp=0.jpg',
      value: '附近商户'
    },
    {
      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
      value: '骑手加入'
    },
    {
      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
      value: '下单奖励'
    }
]

  const sjList = [
     {
      "img": "https://t1.58cdn.com.cn/bidding/small/n_v2d4fc69d303984be4b9a334f2e63e0a9e.png",
      "company": "鑫盛达布料服装回收",
      "desc": "回收丝绸、毛料、皮革等|随约随到"
    },
    {
      "img": "https://t1.58cdn.com.cn/bidding/small/n_v29fc5f497eb01438a8e9400b90342da31.jpg",
      "company": "鑫创通贵金属回收",
      "desc": "镀金回收铂碳钯碳回收铑碳回收铑粉回收废钯水铂金水"
    },
    {
      "img": "https://t1.58cdn.com.cn/bidding/small/n_v251b7d98d04564877b0e065bc9fbe1137.jpg",
      "company": "广东昊鑫再生资源回收",
      "desc": "提供电力设备、金属设备、变频器等回收服务，叉车"
    },
    {
      "img": "https://t1.58cdn.com.cn/bidding/small/n_v21942f58714ff4e39994b9f57c3c8b376.png",
      "company": "宸丰物资回收",
      "desc": "苏州本地仪器仪表设备高价回收整场回收自动设备回收"
    },
    {
      "img": "https://t1.58cdn.com.cn/bidding/small/n_v26ab75a85fce34b809dab21c86616c354.jpg",
      "company": "腾旺贵金属回收",
      "desc": "高价回收贵金属金银铂钯铑钯碳回收废钯水金渣回收海绵"
    },
    {
      "img": "https://t1.58cdn.com.cn/bidding/small/n_v2dd75a83ad894483d90a4460f269fd070.jpg",
      "company": "喜来顺再生资源回收",
      "desc": "工业物资/金属废料回收|金属设备、库存积压、黄铜等回收，提供叉车|上门回收"
    },
    {
      "img": "https://t1.58cdn.com.cn/bidding/small/n_v246b427f5e4824bea9a4d46bd916df698.jpg",
      "company": "苏州德诚贵金属回收利用有限公司",
      "desc": "高价回收废钯水钯碳铂碳铑粉海绵铂含金废料"
    },
    {
      "img": "https://pic5.58cdn.com.cn/mobile/small/n_v2976484d669a84dafab8ae862d7a0b569.jpg",
      "company": "苏州君缘快捷搬家服务有限公司",
      "desc": "苏州价格回收/金属废铁废铜废铝/旧设备厂房搬迁处理"
    }
  ]
  onMounted(()=>{
    if (token.value) {
      getInprogressOrder()
    }
    
    let stepTimer = setInterval(() => {
      //  console.log(currentStep.value);
        stepList[currentStep.value].status = 'success'
        currentStep.value ++
        if (currentStep.value > 3) {
          currentStep.value = 0
          clearInterval(stepTimer)
          stepTimer = null
        }
      }, 1200);
  })
    

</script>

